import React, { Fragment } from 'react';
import { connect } from 'dva';
// 导入组件
import Cover from '../cover/Cover'
import Work from '../work/Work'
import Meet from '../meet/Meet'
import Tired from '../tired/Tired'
import Weekly from '../weekly/Weekly'
import Project from '../project/Project'
import Approval from '../approval/Approval'
import Btravel from '../btravel/Btravel'
import Reim from '../reim/Reim'
import League from '../league/League'
import Shaked from '../shaked/Shaked'
import MajorEvents from '../majorevents/MajorEvents'
import Tag from '../tag/tag'
import PageLoading from '../../components/PageLoading/index'
// 导入样式
import styles from './index.less';
// 导入swiper及样式
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
// 导入图标
import musicIcon from '../../assets/image/music.svg';
import musicCloseIcon from '../../assets/image/closemusic.svg';
//背景音乐
import bgm from '@/assets/music/bgm.mp3'


class Page extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isPlaying: true,
    }
  }

  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'index/getEmployeeInfo',
    })
  }

  componentDidUpdate() {
    const { flag } = this.props
    if (!flag) {
      new Swiper('.swiper-container', {
        direction: 'vertical',
        navigation: {
          nextEl: '.next',
        },
        noSwiping: true,
        noSwipingClass: 'no-swap',
        followFinger: false,
      })
    }
  }

  toggleMusic = () => {
    const { isPlaying } = this.state
    this.setState({
      isPlaying: !isPlaying,
    })
    if (!isPlaying) {
      this.audio.play()
    } else {
      this.audio.pause()
    }
  }

  render() {
    const { isPlaying } = this.state;
    const { workHour, weekly, approval, travel, teamBuilding, shackleton, flag } = this.props
    const DATA = [<Cover />, <Meet />]
    if (workHour) {
      DATA.push(<Work />, <Tired />)
    }
    if (weekly) {
      DATA.push(<Weekly />, <Project />)
    }
    if (approval) {
      DATA.push(<Approval />)
    }
    if (travel) {
      DATA.push(<Btravel />, <Reim />)
    }
    if (teamBuilding) {
      DATA.push(<League />)
    }
    if (shackleton) {
      DATA.push(<Shaked />)
    }
    DATA.push(<MajorEvents />, <Tag />)

    return (
      <Fragment>
        {
          flag ? <PageLoading /> : <Fragment>
            <div className="swiper-container" id={styles.swiperContainer}>
              <div className="swiper-wrapper">
                {
                  DATA.map((v, i) => <div className="swiper-slide" key={v + i}>{v}</div>)
                }
              </div>
            </div>
            <img
              className={`${styles.musicIcon} ${isPlaying ? styles.animate : ''}`}
              src={isPlaying ? musicIcon : musicCloseIcon}
              alt=''
              onClick={this.toggleMusic}
            />
            <div className="next" id={styles.nextBtn} />
            <audio
              src={bgm}
              ref={(audio) => { this.audio = audio }}
              autoPlay={true}
              loop={true}
            />
          </Fragment>
        }
      </Fragment>
    );
  };
}


export default connect(({ index }) => index)(Page);
